<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>创建社团</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div id="data" class="layuimini-container">
    <div class="layuimini-main">
       
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>社团创建信息表</legend>
        </fieldset>

        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">社团名称</label>
                <div class="layui-input-block">
                    <input type="text" v-model="cname" name="cre-title" lay-verify="cre-title" autocomplete="off" placeholder="请输入社团名称" class="layui-input">
                </div>
            </div>
			<div class="layui-form-item">
			    <label class="layui-form-label">所属单位</label>
			    <div class="layui-input-block">
			        <input type="text" v-model="cre_unit" name="cre-unit" lay-verify="cre-unit" autocomplete="off" placeholder="请输入所属单位" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">社团口号</label>
			    <div class="layui-input-block">
			        <input type="text" v-model="cre_slog" name="cre-slog" lay-verify="cre-slog" autocomplete="off" placeholder="请输入社团口号" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">社团简介</label>
			    <div class="layui-input-block">
			        <input type="text" v-model="introduction" name="cre-show" lay-verify="cre-show" autocomplete="off" placeholder="请输入社团简介" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">申请人姓名</label>
			    <div class="layui-input-block">
			        <input type="text" v-model="cre_name" name="cre_name" lay-verify="cre-name" autocomplete="off" placeholder="请输入申请人姓名" class="layui-input">
			    </div>
			</div>
			<div class="layui-form-item" pane="">
			    <label class="layui-form-label">请选择性别</label>
			    <div class="layui-input-block">
			        <input type="radio" name="sex" value="男" title="男" checked="">
			        <input type="radio" name="sex" value="女" title="女">
			    </div>
			</div>
			<div class="layui-form-item">
			    <label class="layui-form-label">请输入专业班级</label>
			    <div class="layui-input-block">
			        <input type="text" v-model="cre_grade" name="cre-grade" lay-verify="cre-grade" autocomplete="off" placeholder="请输入您的专业班级" class="layui-input">
			    </div>
			</div>
			<!-- <div class="layui-form-item">
			    <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
			</div> -->

			<div class="layui-form-item" pane="">
			    <label class="layui-form-label">社团风采上传：</label>
			    <div class="layui-input-block">
			        <button type="button" class="layui-btn layui-btn-normal layui-input-inline" id="chooseFile" >选择文件</button>
					<input type="text" name="title" placeholder="请选择文件" id = "fileNameInput" autocomplete="off" class="layui-input" disabled="disabled" title="不可编辑">
			    </div>
			</div>
			
			
        </form>
		<button onclick="v.greet()" class="layui-btn"  lay-filter="demo1">立即提交</button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
       
    });
	var v = new Vue({
        el:"#data",
        data:{
			
				cname:"",
				introduction:"",
				scene:"",
				cre_unit:"",
				cre_slog:"",
				cre_name:"",
				cre_grade:""
		},
        methods:{
			greet : function () {
				console.log(this)
				axios.post('/setup',{
					cname:this.cname,
					introduction:this.introduction,
					scene:this.scene,
					cre_unit:this.cre_unit,
					cre_slog:this.cre_slog,
					cre_name:this.cre_name,
					cre_grade:this.cre_grade
				}).then(function (response) {
					if(response.code===0){
						alert("申请成功，请等待管理员的审核")
					}else{
						alert("申请失败")
					}
				}).catch(function(err){
					alert(err)
				})
			}
		}

        })
    

	function upload() {
            var inputObj=document.createElement('input')
            inputObj.setAttribute('id','file');
            inputObj.setAttribute('type','file');
            inputObj.setAttribute('name','file');
            inputObj.setAttribute("style",'visibility:hidden');
            document.body.appendChild(inputObj);
            inputObj.value;
            inputObj.click();
            console.log(inputObj);
        } 
 
		var reader=new FileReader();
        $("#chooseFile").on('click',function(){
            upload();
			var up = document.querySelector('#file')
            up.addEventListener('change', e => {
                for (let entry of e.target.files){
				   console.log(reader.readAsDataURL(entry));
                    document.getElementById("fileNameInput").value=entry.name;
					console.log(entry)
                    console.log(entry.name, entry.webkitRelativePath);
                }
            });
        });
		reader.onload = function(){
			v.scene = reader.result
		}
         $("#fileImport").on('click',function(){
            //文件上传事件
        });
</script>

</body>
</html>